<template>
  <div class="tem">
    <div class="card" v-for="(item, index) in array" :key="index">
      <div class="tips">
        <span class="float-tips">正在补贴</span>
      </div>
      <img src="#" alt="加载失败" />
      <div class="content">
        <p>名称</p>
        <p>价格</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        { arr: "1" },
        { arr: "1" },
        { arr: "1" },
        { arr: "1" },
        { arr: "1" },
        { arr: "1" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.tem {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  .card {
    width: 120px;
    background: #fff;
    margin-right: 2px;
    .tips {
      width: 120px;
      .float-tips {
        display: inline-block;
        font-size: 7px;
        color: white;
        background: red;
      }
    }
    img {
      min-height: 70px;
    }
    .content {
      text-align: center;
    }
  }
}
</style>
